<template>
  <div class="todo-form">
    <form @submit.prevent="handleSubmit">
      <div class="input-group">
        <input
          type="text"
          v-model.trim="todoText"
          placeholder="添加新的待办事项..."
          class="todo-input"
          required
        />
        <button type="submit" class="add-btn" :disabled="!todoText.trim().length">添加</button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Emits {
  add: [text: string]
}

const todoText = ref('')
const emit = defineEmits<Emits>()
function handleSubmit() {
  if (todoText.value) {
    emit('add', todoText.value)
    todoText.value = ''
  }
}
</script>

<style scoped>
.todo-form {
  margin-bottom: 2rem;
}

.input-group {
  display: flex;
  gap: 1rem;
}

.todo-input {
  flex: 1;
  padding: 1rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.todo-input:focus {
  outline: none;
  border-color: #3498db;
}

.todo-input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

.add-btn {
  padding: 1rem 2rem;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-btn:hover:not(:disabled) {
  background: #2980b9;
}

.add-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}
</style>
